<script setup lang="ts">
import { ref } from "vue";
// 作用域插槽:就是可以传递数据的插槽,子组件可以讲数据回传给父组件,
// 父组件可以决定这些回传数据用何种方式展示
let todoList = ref([
  {id:1,title:"吃饭",done:true},
  {id:1,title:"睡觉",done:false},
  {id:1,title:"跑步",done:false}
])
</script>
<template>
  <div>
    <h1 style="text-align: center">插槽分类</h1>
    <nav>
      <router-link to="slot_named">具名插槽</router-link>
      <router-link to="slot_conditions">条件插槽</router-link>
      <router-link to="slot_dynamic">动态插槽</router-link>
      <router-link to="slot_scope">作用域插槽</router-link>
    </nav>
    <div>
      <router-view />
    </div>
<!--    <Test1 :todos="todoList">-->
<!--&lt;!&ndash;      {解构数据}&ndash;&gt;-->
<!--      <template v-slot="{$row,$index}">-->
<!--        <span :style="{color:$row.done?'green':'red'}">{{$row.title}}&ndash;&gt;{{$index}}</span>-->
<!--      </template>-->
<!--    </Test1>-->
<!--    <Test>-->
<!--      <div>-->
<!--        <pre>赤壁赋</pre>-->
<!--      </div>-->
<!--      &lt;!&ndash;      具名插槽数据填充&ndash;&gt;-->
<!--&lt;!&ndash;      v-slot指令可以简化为#&ndash;&gt;-->
<!--      <template #a>-->
<!--        <div>-->
<!--            <pre>-->
<!--              赠汪伦-->
<!--            李白乘舟将欲行⑵，忽闻岸上踏歌声⑶。-->
<!--            桃花潭水深千尺⑷，不及汪伦送我情⑸。-->
<!--            </pre>-->
<!--        </div>-->
<!--      </template>-->
<!--      <template v-slot:b>-->
<!--        插槽B-->
<!--      </template>-->
<!--    </Test>-->
  </div>
</template>
<style scoped>
a {
  margin: 10px;
}

nav {
  padding: 30px;
  display: flex;
  width: 100%;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: blue;
  box-shadow: 1px 1px 1px #ccc;
  background-color: antiquewhite;
}

nav a.router-link-exact-active {
  color: aqua;
  box-shadow: 2px 2px 2px #ccc;
}
</style>
